<template>
  <view class="container">
    <!-- 标题 -->
    <view class="title">
      <text class="title-text">可以试试对我说：</text>
    </view>

    <!-- 提示按钮组 -->
    <view class="button-group">
      <navigator url="/pages/camera/camera" class="button-container">
        <button class="button-custom">打开微信拍照功能</button>
      </navigator>
      <navigator url="/pages/upload/upload" class="button-container">
        <button class="button-custom">上传一张照片发朋友圈</button>
      </navigator>
      <navigator url="/pages/learn/learn" class="button-container">
        <button class="button-custom">学习其他软件的功能</button>
      </navigator>
    </view>

    <!-- 提示文本 -->
    <view class="instruction">
      <text class="instruction-text">长按图标发出指令</text>
    </view>

    <!-- 语言按钮 -->
    <view class="bottom-icon">
      <button @touchstart="start_say" @touchend="end_say" class="record-button" :class="{ active: isRecording }">
        <!-- 相关录音逻辑-->
        <image class="record-icon" src="/static/funtion.png"></image>
      </button>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    methods: {
      start_say: function() {
        //console.log("开始")
        wx.startRecord({
          success: function(res) {
            var tempFilePath = res.tempFilePath;
            // 将录音文件保存起来，你可以上传到服务器或者本地存储
            console.log('录音文件路径：', tempFilePath);
          },
          fail: function(res) {
            console.log('录音失败:', res);
          }
        })
      },
      end_say: function() {
        // console.log("结束")
        wx.stopRecord();

      },
    }
  };
</script>

<style lang="scss">
  // 整体容器（布局、样式）
  .container {
    width: 100%;
    height: 100vh;
    background-color: firebrick; // 红色背景
    padding-top: 20px; // 与边框（顶部）的间距
    display: flex; // 弹性布局
    flex-direction: column; // 主轴方向为垂直方向
    align-items: center; // 垂直轴方向居中对齐
    justify-content: flex-start; // 水平轴方向起点起对齐
  }

  // 标题（布局、样式）
  .title {
    width: 100%;
    padding: 0 20px;
    margin-bottom: 20px; // 与下方元素的间距
  }

  .title-text {
    font-size: 28px;
    color: white;
    font-weight: bold; // 粗体
  }

  // 按钮组（大小、布局、样式）
  .button-group {
    width: 100%;
    padding: 0 20px;
  }

  .button-container {
    width: 65%;
    height: 25%;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start; // 左对齐
  }

  .button-custom {
    width: 90%;
    padding: 15px 0;
    background-color: white; // 按钮背景
    border: 6rpx solid black; // 按钮边框
    border-radius: 20px; // 按钮圆角
    //按钮文字
    color: black;
    font-size: 20px;
    font-weight: bold;
  }

  // 提示文本（布局、样式）
  .instruction {
    bottom: 130px; // 距离底部的位置
    position: fixed; // 固定位置
  }

  .instruction-text {
    font-size: 25px;
    font-weight: bold;
    color: white;
  }

  // 语音按钮
  .bottom-icon {
    bottom: 20px;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .record-button {
    width: 100px;
    height: 100px;
    border-radius: 50%; // 设置为圆形
    border: 6rpx solid black;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); // 按钮阴影
    background-color: floralwhite;
    display: flex;
    align-items: center;
    justify-content: center;

    .record-icon {
      width: 40px;
      height: 40px;
    }

    // 长按激活样式
    &.active {
      background-color: yellowgreen
    }
  }
</style>